<template>
  <view class="container">
    <!-- 购物车列表 -->
    <u-swipe-action v-for="(item, index) in cartList" :key="item.cartid" 
                    :index="index" 
                    @click="handleDelete"
                    :options="handleSwipeClick">
      <view class="cart-item">
        <u-checkbox v-model="item.checked" @change="toggleSelect(index)"></u-checkbox>
        <view  v-for="goodsitem in item.goodsList" :key="item.icid">
		<u-image :src="baseurl + goodsitem.gimg.split(',')[0]" width="150rpx" height="150rpx" radius="6"></u-image>
		</view>
	
        
        <view class="info"  v-for="goodsitem in item.goodsList" :key="goodsitem.icid">
          <view class="title">{{ goodsitem.gname }}</view>
          <view class="price">¥{{ goodsitem.price }}</view>
		   
          <u-number-box 
            v-model="item.quantity"
            :min="1"
			integer
            @change="changeQuantity(index, $event)"
          ></u-number-box>
        </view>
      </view>
    </u-swipe-action> 
	

    <!-- 底部汇总栏 -->
    <!-- 修改后的模板 -->
    <view class="footer">
      <!-- 移除 checkbox-group 直接使用 checkbox -->
      <u-checkbox 
        v-model="allChecked" 
        @change="toggleAll" 
		>全选</u-checkbox>
      
      <view class="total">
        合计：<text class="price">¥{{ totalPrice }}</text>
      </view>
      
      <u-button type="primary" size="medium" @click="handleSettle">
        去结算({{  totalCount  }})
      </u-button>
    </view>
      </view>
</template>

<script>
	
	import { listCart , editnum , deleteById} from '../API/cart/cart';
	import { API_BASE_URL } from '../../utils/appConfig';
	
export default {
  data() {
    return {
	  allChecked:false,
      cartList: [],
	  userid:3,
	  baseurl:API_BASE_URL,
      handleSwipeClick: [
        {
          text: '删除',
          style: {
            backgroundColor: '#dd524d'
          }
        }
      ]
    };
  },
  computed: {
   // 计算总价
   totalPrice() {
     return this.cartList
       .filter(item => item.checked)
       .reduce((sum, item) => sum + item.price * item.quantity, 0)
       .toFixed(2)
   },
   // 计算总数量
   totalCount() {
     return this.cartList
       .filter(item => item.checked)
       .reduce((sum, item) => sum + item.quantity, 0)
   }
  },
  methods: {
	getCartList() {
	 	  	listCart(this.userid).then(res => {
	 	  		let list = res.data.rows;
	 	  		this.cartList = list.map(item=>{
	 	  			item.checked = false;
	 	  			return item;
	 	  		})
	 	  		
	 	  	})
	 	  },
	     // 切换单个商品选中状态
	     toggleSelect(index) {
	       this.cartList[index].checked = !this.cartList[index].checked
	 	  console.log(this.cartList[index].checked)
	       this.updateAllChecked()
	     },
	 
	     // 修改商品数量
	     changeQuantity(index, value) {
	       this.cartList[index].quantity = value
	 	  const cart={
			"cartid":this.cartList[index].cartid,
			"userid":this.userid,
			"quantity":value.value
			  }
		 
	 	   console.log(JSON.stringify(cart)+"   ")
	 	  editnum(cart).then(res=>{
	 		    console.log("修改成功")
	 	  })
	     },
	 
	     // 全选/取消全选
	     toggleAll() {
	       this.allChecked = !this.allChecked
	       this.cartList.forEach(item => {
	 		 item.checked = this.allChecked
			 console.log(item.checked) 
	 		  })
	 
	     },
	     // 更新全选状态
	     updateAllChecked() {
	 		 this.allChecked  = this.cartList.every(item => item.checked)
	 		
	 	  console.log(this.allChecked)
	     },
	 	
	 
	     // 去结算
	     handleSettle() {
	       const selectedItems = this.cartList.filter(item => item.checked)
	       if (selectedItems.length === 0) {
	         return uni.showToast({ title: '请选择商品', icon: 'none' })
	       }
	       uni.$u.route({
	         url: 'pages/order/confirmOrder',
			 params:{
				 items:JSON.stringify(selectedItems),
				 userid:this.userid
			 }
	       })
	     },
	 	SwipeClick(item){
	 		console.log(item.name+"  .....sdfsdf")
	 		uni.showModal({
	 			title: '温馨提示',
	 			content: '确定要删除吗？',
	 			success: res => {
	 				if (res.confirm) {
	 					// this.show1 = false
	 					deleteById(item.name).then(res=>{
	 						console.log("删除成功");
	 						this.getCartList();
	 					})
	 				}
	 			}
	 		})
	 	}
	   },
	   onShow() {
	   		this.getCartList();
	   },
	   onLoad() {
	 	
	   	this.getCartList();
	   }
	 }
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 100rpx;
}

.cart-item {
	margin-top: 10px;
	border-radius: 2%;
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  
  .info {
    flex: 1;
    margin-left: 20rpx;
    
    .title {
      font-size: 28rpx;
      margin-bottom: 10rpx;
    }
    
    .price {
      color: #e64340;
      font-size: 32rpx;
      margin-bottom: 20rpx;
    }
  }
}

.footer {
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  background-color: #fff;
  border-top: 1rpx solid #eee;
  
  .total {
    flex: 1;
    margin: 0 30rpx;
    
    .price {
      color: #e64340;
      font-weight: bold;
    }
  }
}
</style>